<template>
  <div>
    <div class="active-list" v-for="(item,key) in list" :key="key"  @click="toDetail(key)">
      <el-card shadow="hover" class="active-card" >
        <el-image :src="item.cover " fit="cover" class="active-cover"></el-image>
        <div class="active-info">
          <div class="active-info-name">{{item.name}}</div>
          <div class="active-info-time">
            <el-row>
              <el-col :span="12">
                <span>报名时间：{{item.sign_up_start}} - {{item.sign_up_end}}</span>
              </el-col>
              <el-col :span="12" class="acitve-info-last">
                <span>活动时间：{{item.start_time}} - {{item.end_time}}</span>
              </el-col>
            </el-row>
          </div>
          <div class="active-info-time">
            <el-row>
              <el-col :span="12">
                <span v-if="item.active_limit == -1">报名范围：所有人</span>
                <span v-if="item.active_limit == 0">报名范围：跑团会员</span>
                <span v-if="item.active_limit == 1">报名范围：高级会员</span>
              </el-col>
              <el-col :span="12" class="acitve-info-last">
                <span>报名人数：{{item.user_num}}</span>
              </el-col>
            </el-row>
          </div>
          <div class="active-info-time">
            <el-row>
              <el-col :span="24">
                <span>地点：{{item.address}}</span>
              </el-col>
            </el-row>
          </div>
        </div>
        <template v-if="item.state == 1">
          <el-tag size="mini" class="active-tags" type="info">草稿箱</el-tag>
        </template>
        <template v-if="item.state == 2">
          <el-tag size="mini" class="active-tags" v-if="item.active_state == 0" type="warning">报名未开始</el-tag>
          <el-tag size="mini" class="active-tags" v-if="item.active_state == 1" type="primary">报名中</el-tag>
          <el-tag size="mini" class="active-tags" v-if="item.active_state == 2" type="success">进行中</el-tag>
          <el-tag size="mini" class="active-tags" v-if="item.active_state == 3" type="info">活动结束</el-tag>
          <el-tag size="mini" class="active-tags" v-if="item.active_state == 4" type="danger">报名结束</el-tag>
        </template>
        <template v-if="item.state == 3">
          <el-tag size="mini" class="active-tags" type="info">暂停</el-tag>
        </template>
        <template v-if="item.state == 4">
          <el-tag size="mini" class="active-tags" type="warning">冻结</el-tag>
        </template>
        <div style="height:40px;line-height:40px;" v-if="!child" @click.stop>
          <div class="card-btns" style="float:left;text-align:left">
            <el-button
              class="com-link"
              type="text"
              v-clipboard:copy="message"
              v-clipboard:success="copySuccess"
              v-clipboard:error="copyError"
            >
              <span
                style="display:inline-block;width:120px;overflow:hidden;text-align:left"
              >https://www.baicu.com</span>
              <i class="el-icon-document-copy" style="margin-left:5px;"></i>
            </el-button>
          </div>
          <div class="card-btns">
            <span @click.stop >
              <el-button
                class="com-link"
                icon="el-icon-video-pause"
                type="text"
              >暂停</el-button>
              <el-button
                class="com-link"
                icon="el-icon-video-play"
                type="text"
              >启动</el-button>
            </span>
            <el-button
                class="com-link"
                icon="el-icon-view"
                type="text"
                @click="editActive(item.id)"
              >查看</el-button>
          </div>
        </div>
      </el-card>
      <div class="active-type-tag active-type-1" v-if="item.type == 1">赛事</div>
      <div class="active-type-tag active-type-2" v-if="item.type == 2">活动</div>
      <div class="active-type-tag active-type-3" v-if="item.type == 3">任务</div>
    </div>
  </div>
</template>

<script>
export default {
  props: { list: {} ,child : {}},
  data() {
    return {
      message: "https://www.baidu.com",
      now_time : Date.parse(new Date())
    };
  },
  mounted(){
    
  },
  methods: {
    //时间转时间戳
    dateToTime(date){
      var data = new Date(date);
      return data.getTime();
    },
    //复制链接
    copySuccess(e) {
      this.toast(1,'复制成功：'+e.text);
    },
    copyError() {
      this.toast(0,'复制失败');
    },
    /**
     * 活动操作
     */
    editActive(e, id) {
      switch (e) {
        case 1:
          this.editInfo(id);
          break;
        case 2:
          this.surplusActive(id);
          break;
        case 3:
          this.surplusActive(id);
          break;
        case 4:
          this.deleteDrafts(id);
          break;
        case 5:
          this.endSignUp(id);
          break;
        case 6:
          localStorage.setItem(
            "router_query",
            JSON.stringify({
              path: "/manage/active/list"
            })
          );
          this.$router.push({
            path: "/manage/active/list/edit",
            query: {
              id: id,
              edit : true,
            }
          });
          break;
      }
    },
  
    //查看活动详情
    toDetail(id){
      this.$router.push({path:'/stage/active/edit',query:{id:id}})
      // let routeData = this.$router.resolve({
      //   path: "/stage/active/edit?id="+id,
      // });
      // window.open(routeData.href, "_blank");
    },
    //暂停、启动活动
    surplusActive(id) {
      this.ajaxs("active/surplusActive", {
        data: { id: id },
        success: res => {
          this.toast(res.code, res.msg);
          if (res.code) {
            this.$emit("refesh");
          }
        }
      });
    },
  }
};
</script>

<style>
.active-info {
  height: 33px;
  line-height: 33px;
  font-size: 12px;
  color: #666;
}
.active-list {
  position: relative;
  overflow: hidden;
}
.active-type-tag {
  position: absolute;
  width: 300px;
  height: 30px;
  line-height: 30px;
  color: #fff;
  text-align: center;
  background: #f56c6c;
  transform: rotate(-45deg);
  left: -120px;
  top: 15px;
}
.active-card {
  overflow: hidden;
  height: 180px;
  margin-bottom: 20px;
  cursor: pointer;
  position: relative;
}
.active-cover {
  width: 195.5px;
  height: 110px;
  float: left;
}
.active-info {
  float: left;
  height: 110px;
  margin-left: 20px;
  width: calc(100% - 215.5px);
}
.active-info-name {
  height: 20px;
  font-size: 14px;
  width: calc(100% - 60px);
  overflow: hidden;
  line-height: 20px;
  font-weight: bold;
}
.active-info-name:hover{
  color: #8a70c6;
}
.active-tags {
  position: absolute;
  right: 20px;
}
.acitve-info-last {
  text-align: right;
}
.acitve-info-center {
  text-align: center;
}
.card-btns {
  float: right;
  text-align: right;
  margin-top: 10px;
}

.card-btns .el-button--primary {
  background: #8a70c6;
  border-color: #8a70c6;
}
.active-type-1 {
  background-color: #8a70c6;
}
.active-type-2 {
  background-color: #409eff;
}
.active-type-3 {
  background-color: #e6a23c;
}
</style>